// 个人中心

import React,{Component} from 'react';
import { View, Text, StyleSheet, Dimensions, Image, StatusBar } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';

class MyCenterScreen extends Component{
    render() {
        return (
            <View style={styles.box}>
                {/*顶部*/}
                <View style={styles.top}>
                    <Image
                        source={require('../../images/mytopbg.jpg')}
                        style={styles.topbg}
                    ></Image>
                    <View style={styles.in}>
                        <View style={styles.left}>
                            <Image
                                source={require('../../images/1.jpg')}
                                style={styles.userpic}
                            ></Image>
                            <View style={styles.leftin}>
                                <Text style={styles.gologin}>立即登录</Text>
                                <Text style={styles.desc}>让生活多份自在</Text>
                            </View>

                        </View>
                        <Text style={styles.right}>充值></Text>
                    </View>
                </View>
                {/*顶部结束*/}

                {/*我的钱包*/}
                <View style={styles.wallet}>
                    <View style={styles.walletleft}>
                        <Ionicons
                            name={'ios-card'}
                            size={22}
                            style={styles.walleticon}
                        />
                        <Text style={styles.mywallet}>我的钱包</Text>
                    </View>
                    <Text style={styles.walletright}>开发票</Text>
                </View>
                {/*我的钱包结束*/}

                {/*账户信息*/}
                <View style={styles.account}>
                    <View style={styles.accountitem}>
                        <Text style={styles.accountnum}>0张</Text>
                        <Text style={styles.accountdesc}>优惠券</Text>
                    </View>

                    <View style={styles.accountitem}>
                        <Text style={styles.accountnum}>￥ 0.00</Text>
                        <Text style={styles.accountdesc}>余额</Text>
                    </View>


                    <View style={styles.accountitem}>
                        <Text style={styles.accountnum}>0张</Text>
                        <Text style={styles.accountdesc}>e卡</Text>
                    </View>


                    <View style={styles.accountitem}>
                        <Text style={styles.accountnum}>0</Text>
                        <Text style={styles.accountdesc}>积分</Text>
                    </View>

                </View>
                {/*账户信息结束*/}

                {/*其他*/}
                <View style={styles.others}>
                    <View style={styles.othersitem}>
                        <Ionicons
                            name={'ios-pin'}
                            size={23}
                            style={[styles.otherslefticon,styles.otersicon1]}
                        />
                        <View style={styles.othersitemright}>
                            <Text style={styles.otersitemtitle}>常用地址</Text>
                            <Text style={styles.othersitemrr}>></Text>
                        </View>
                    </View>

                    <View style={styles.othersitem}>
                        <Ionicons
                            name={'ios-heart'}
                            size={23}
                            style={[styles.otherslefticon,styles.otersicon2]}
                        />
                        <View style={styles.othersitemright}>
                            <Text style={styles.otersitemtitle}>推荐有奖</Text>
                            <Text style={styles.othersitemrr}>></Text>
                        </View>
                    </View>

                    <View style={styles.othersitem}>
                        <Ionicons
                            name={'logo-snapchat'}
                            size={23}
                            style={[styles.otherslefticon,styles.otersicon3]}
                        />
                        <View style={styles.othersitemright}>
                            <Text style={styles.otersitemtitle}>积分商城</Text>
                            <Text style={styles.othersitemrr}>></Text>
                        </View>
                    </View>

                    <View style={styles.othersitem}>
                        <Ionicons
                            name={'ios-subway'}
                            size={23}
                            style={[styles.otherslefticon,styles.otersicon4]}
                        />
                        <View style={styles.othersitemright}>
                            <Text style={styles.otersitemtitle}>取送小e招募</Text>
                            <Text style={styles.othersitemrr}>></Text>
                        </View>
                    </View>


                </View>
                {/*其他信息结束*/}


                {/*意见反馈*/}
                <View style={styles.others}>
                    <View style={styles.othersitem}>
                        <Ionicons
                            name={'ios-pin'}
                            size={23}
                            style={[styles.otherslefticon,styles.otersicon1]}
                        />
                        <View style={styles.othersitemright}>
                            <Text style={styles.otersitemtitle}>意见反馈</Text>
                            <Text style={styles.othersitemrr}>></Text>
                        </View>
                    </View>

                    <View style={styles.othersitem}>
                        <Ionicons
                            name={'ios-subway'}
                            size={23}
                            style={[styles.otherslefticon,styles.otersicon4]}
                        />
                        <View style={styles.othersitemright}>
                            <Text style={styles.otersitemtitle}>更多</Text>
                            <Text style={styles.othersitemrr}>></Text>
                        </View>
                    </View>
                </View>
                {/*意见反馈结束*/}

                {/*客服*/}
                <View style={styles.service}>
                    <Ionicons
                        name={'ios-megaphone'}
                        size={20}
                        style={styles.megaphone}
                    />
                    <Text style={styles.servicephone}>客服电话</Text>
                </View>
                {/*客服结束*/}

                <View style={styles.bot}>

                </View>

            </View>


        )
    }
}

let swidth = Dimensions.get('window').width;
let styles = StyleSheet.create({
    top:{
        width:'100%',
        height:swidth/3,
        position:'relative',
    },
    topbg:{
        width:'100%',
        height:swidth/3,
        opacity:0.2,
    },
    in:{
        width:'100%',
        height:swidth/3,
        position:'absolute',
        left:0,
        top:0,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between',
    },
    left:{
        width:'35%',
        height:swidth/3/2,
        marginLeft:20,
        flexDirection:'row',
        alignItems:'center',
    },
    right:{
        marginRight:20,
        fontSize:17,
        color:"#FE6F48",
    },
    userpic:{
        width:swidth/7.6,
        height:swidth/7.6,
        borderRadius:swidth/14,
        marginRight:8,
    },
    gologin:{
      fontSize:18,
      color:'rgba(0,0,0,0.7)',
        marginBottom:6,
    },
    desc:{
        color:'rgba(0,0,0,0.5)',
    },
    wallet:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between',
        height:50,
        borderTopWidth:1,
        borderTopColor:'rgba(0,0,0,0.05)',
    },
    walletleft:{
        flexDirection:'row',
        alignItems:'center',
        marginLeft:20,
    },
    walleticon:{
        marginRight:5,
        color:'#FFA671',
    },
    mywallet:{
        fontSize:16,
    },
    walletright:{
        fontSize:16,
        marginRight:20,
        color:'#0EE2FB',
    },
    account:{
        height: 80,
        width:'100%',
        flexDirection:'row',
        borderTopColor:'rgba(0,0,0,0.1)',
        borderTopWidth:1,
        alignItems:'center',
        borderBottomWidth:8,
        borderBottomColor:'#F3F7FA',
    },
    accountitem:{
        width:'25%',
    },
    accountnum:{
        fontSize:15,
        color:'rgba(0,0,0,0.8)',
        textAlign:'center',
    },
    accountdesc:{
        color:'rgba(0,0,0,0.5)',
        fontSize:15,
        textAlign:'center',
    },
    others:{
        borderBottomWidth:8,
        borderBottomColor:'#F3F7FA',
    },
    othersitem:{
        width:'100%',
        height:40,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between',
    },
    othersitemright:{
        flexDirection:'row',
        alignItems:'center',
        width:'88%',
        justifyContent:"space-between",
        borderBottomWidth:1,
        borderBottomColor:'rgba(0,0,0,0.05)',
        height:40,
    },
    otherslefticon:{
        marginLeft:20,
    },
    otersicon1:{
        color:'#32CAEA',
    },
    otersicon2:{
        color:'#FF93B4',
    },
    otersicon3:{
        color:'#47D862',
    },
    otersicon4:{
        color:'#65A6FF',
    },
    othersitemrr:{
        marginRight:20,
        color:'rgba(0,0,0,0.3)',
        fontSize:16,

    },
    otersitemtitle:{
        fontSize:15,
        color:'rgba(0,0,0,0.8)',
    },
    service:{
        height:50,
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center',
        borderBottomWidth:15,
        borderBottomColor:'#F3F7FA',
    },
    megaphone:{
        color:'#32CAEA',
        marginRight:5,
    },
    servicephone:{
        fontSize:15,
        color:'rgba(0,0,0,0.8)',
    },
    box:{
        backgroundColor:'white',
        height:Dimensions.get('window').height-60-StatusBar.currentHeight,
    }
})



export default MyCenterScreen;

